<template lang="html">
  <section class='infocase'>
    <top-list :listData ="topListDate" @callBackTopList = "changeTopListDate" :iconList='iconArray'></top-list>
    <div class="case_dataPicker">
      <ul class="clearfix">
        <li :class="{active:activeClass==='today'}" @click="caseBarClick('today')">昨天</li>
        <li :class="{active:activeClass==='week'}" @click="caseBarClick('week')">近7天</li>
        <li :class="{active:activeClass==='month'}" @click="caseBarClick('month')" >近30天</li>
      </ul>
      <!-- <el-date-picker
        v-model="chartsDate"
        type="daterange"
        range-separator="至"
        size='mini'
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd">
      </el-date-picker> -->
			<el-date-picker
				v-model="chartsDate[0]"
				align="right"
				type="date"
				size='mini'
				style='width:180px;'
				placeholder="开始日期"
				value-format='yyyy-MM-dd'
        @change = "changeCaseBar"
				:picker-options='pickerBeginDateBefore'>
			</el-date-picker>
			<span style="margin: 0 12px;">至</span>
			<el-date-picker
				v-model="chartsDate[1]"
				align="right"
				type="date"
				size='mini'
				style='width:180px;'
				placeholder="结束日期"
				value-format='yyyy-MM-dd'
				@change = "changeCaseBar"
				:picker-options='pickerBeginDateAfter'>
			</el-date-picker>
    </div>
    <div class="time_bar clearfix">
      <case-bar class='chart_area' chartId='timeBar' :caseBarData="timeBarDate" title='时间'></case-bar>
      <ranking class="ranking"
        :rankingData = "RanKingTime"
        typeLabel='日期'
        :hasDatePick='false'
        title='近7天排行榜'></ranking>
    </div>
    <div class="type_bar clearfix">
      <case-bar class='chart_area' chartId='typeBar' :caseBarData="typeBarDate" title='案件类型'></case-bar>
      <ranking class="ranking"
        :rankingData = "RanKingType"
        @callBackRan ='changeRanKingType'
        typeLabel='案件类别'
        title='案件排行榜'
        ></ranking>
    </div>
    <div class="pie_area">
      <case-pie class="pieItem" title='嫌疑人情况' :seriesData="XYRseriesData" :areaData ="XYRareaData" chartId='leftPie'></case-pie>
      <case-pie class="pieItem" title='刑拘情况' :seriesData="XJseriesData" :areaData="XJareaData" chartId='centerPie'></case-pie>
      <case-pie class="pieItem" title='逮捕情况' :seriesData="DBseriesData" :areaData="DBareaData" chartId='rightPie'></case-pie>
    </div>
    <div class="wordCloud">
      <word-cloud title='简要案情词云' :wordData = "wordData" chartId='wordCloud'></word-cloud>
    </div>
    <div class="radar">
      <radar title='前五类案件评估图' :Rank5seriesData = "Rank5seriesData" :Rank5caseData="Rank5caseData" chartId='radar'></radar>
    </div>
  </section>
</template>
<script>
import {apiCountTypeRank5,apiCountWords,apiTopList,apiCaseBar,apiTypeBar,apiRanTime,apiRanType,apiCountAreas} from '../../api/api'
import {deal_getTopList} from './information_chart_deal'
import caseBar from '../../components/common/charts/casebar.vue'
import topList from '../../components/common/listPanel.vue'
import ranking from '../../components/common/rank/ranking.vue'
import casePie from '../../components/common/charts/casepie.vue'
import wordCloud from '../../components/common/charts/wordCloud.vue'
import Radar from '../../components/common/charts/radar.vue'
export default {
  components : {
    topList,
    caseBar,
    ranking,
    casePie,
    wordCloud,
    Radar,
  },
  data(){
    return {
      topListDate : [],
      iconArray : ['suspect_history','detention_history','arrest_history','cases_history','suspect_today','detention_today','arrest_today','cases_today'],
      //图表
      timeBarDate:[],
      typeBarDate:[],
      chartsDate: ['',''],
      activeClass : 'today',
      RanKingType:[],
      RanKingTime:[],
      DBareaData:[],
      XJareaData:[],
      XYRareaData:[],
      DBseriesData:[],
      XJseriesData:[],
      XYRseriesData:[],
      wordData :[],
      Rank5seriesData :[],
			Rank5caseData:[],
			pickerBeginDateBefore:{
				disabledDate: (time) => {
					let beginDateVal = new Date(this.chartsDate[1]).getTime();
					if (beginDateVal) {
						return time.getTime() > beginDateVal;
					}
				}
			},
			pickerBeginDateAfter:{
				disabledDate: (time) => {
					let beginDateVal = new Date(this.chartsDate[0]).getTime();
					if (beginDateVal) {
						return time.getTime() < beginDateVal;
					}
				}
			}
    }
  },
   mounted(){
    let date = new Date(new Date()-86400000)._toDateString()
  	this.getTopList(date);
    //初始化当天数据
  	this.getTimeBar('',2,'today',1);
  	this.getTimeBar('',2,'today',2);
  	this.getRanTime();
  	this.getRanType();
  	this.getAreas();
  	this.getWords();
  	this.getCountTypeRank5();
  },
  methods:{
    //顶部列表
  	getTopList(date){/*更新toplist*/
  		apiTopList(date).then((res)=>{
				if(res.status==200){
					this.topListDate=deal_getTopList(JSON.parse(res.data.result));
				}
      })
  	},
  	changeTopListDate(date){/*更新toplist时间*/
  		this.getTopList(date);
  	},
    //时间和分类柱状图

  	getTimeBar(date,type,scopeTime,barType){/*获取timeBar数据*/
  		apiCaseBar(date,type,scopeTime,barType).then((res)=>{
  			if(res.status==200){
  				let timeBarJSon = JSON.parse(res.data.result);
  				let time= [];
  				let dv = [];
  				let xj = [];
  				let xyr = [];
  				if(barType==1){
            let _num = parseInt(timeBarJSon.length / 10) == 0 ? 1 : parseInt(timeBarJSon.length / 10);
            timeBarJSon = timeBarJSon.filter((elem,index) => {
              return index % _num == 0;
            })
  					for (let item in timeBarJSon) {
	  					time.push(timeBarJSon[item].time);
              xyr.push(timeBarJSon[item].value.xyr);
              xj.push(timeBarJSon[item].value.xj);
						  dv.push(timeBarJSon[item].value.db);
	  				}
  						this.timeBarDate=[];
							this.timeBarDate.push(time);
              this.timeBarDate.push(xyr);
              this.timeBarDate.push(xj);
							this.timeBarDate.push(dv);
  				}else if(barType==2){
  					for (let item in timeBarJSon) {
              time.push(timeBarJSon[item].case);
              xyr.push(timeBarJSon[item].value.xyr);
              xj.push(timeBarJSon[item].value.xj);
						  dv.push(timeBarJSon[item].value.db);
	  				}
  						this.typeBarDate=[];
							this.typeBarDate.push(time);
              this.typeBarDate.push(xyr);
              this.typeBarDate.push(xj);
							this.typeBarDate.push(dv);
  				}
  			}
  		}
  		)
  	},
    //排行榜
		getRanTime(scopeTime='today'){/*上面的Rank*/
			apiRanTime(scopeTime).then((res)=>{
				if(res.status==200){
					let RanTimeJson = JSON.parse(res.data.result);
					let RanTimeData=[];
					RanTimeData['嫌疑人数']=[];
					RanTimeData['刑拘数'] =[];
					RanTimeData['逮捕数'] =[];
					for (let item in RanTimeJson){
						RanTimeData['嫌疑人数'].push({
		          type : RanTimeJson[item].time,
		          percent : RanTimeJson[item].value.xyr,
		          ratio :RanTimeJson[item].value.xyrPercent //一定要传字符串
								});
						RanTimeData['逮捕数'].push({
							type : RanTimeJson[item].time,
		          percent : RanTimeJson[item].value.db,
		          ratio :RanTimeJson[item].value.dbPercent
						});
						RanTimeData['刑拘数'].push({
							type : RanTimeJson[item].time,
		          percent : RanTimeJson[item].value.jl,
		          ratio :RanTimeJson[item].value.jlPercent
						});
					}
					RanTimeData['嫌疑人数'].length=5;
					RanTimeData['刑拘数'] .length=5;
					RanTimeData['逮捕数'] .length=5;
					this.RanKingTime =RanTimeData;
				}
			})
		},
		getRanType(scopeTime='today'){/*下面的Rank*/
			apiRanType(scopeTime).then((res)=>{
				if(res.status==200){
					let RanTimeJson = JSON.parse(res.data.result);
					let RanTimeData=[];
					RanTimeData['嫌疑人数']=[];
					RanTimeData['刑拘数'] =[];
					RanTimeData['逮捕数'] =[];
					for (let item in RanTimeJson){
						RanTimeData['嫌疑人数'].push({
  	          type : RanTimeJson[item].case,
  	          percent : RanTimeJson[item].value.xyr,
  	          ratio :RanTimeJson[item].value.xyrPercent //一定要传字符串
								});
						RanTimeData['逮捕数'].push({
							type : RanTimeJson[item].case,
		          percent : RanTimeJson[item].value.db,
		          ratio :RanTimeJson[item].value.dbPercent
						});
						RanTimeData['刑拘数'].push({
							type : RanTimeJson[item].case,
		          percent : RanTimeJson[item].value.jl,
		          ratio :RanTimeJson[item].value.jlPercent
						});
					}
					this.RanKingType =RanTimeData;
				}
			})
		},

		getAreas(scopeTime='today',chooseDate=['2015-02-01','2016-01-12'],type=1){/*获得下面三个圆环的数据*/
			apiCountAreas(scopeTime,chooseDate,type).then((res)=>{
				if(res.status==200){
					let areasJson = JSON.parse(res.data.result);
					let areaDataDB = [];
					let areaDataXJ = [];
					let areaDataXYR = [];
					let seriesDataDB =[];
					let seriesDataXJ =[];
					let seriesDataXYR =[]
					for(let item in areasJson.db){
						areaDataDB.push(areasJson.db[item].area);
						seriesDataDB.push({value:areasJson.db[item].value,name :areasJson.db[item].area});
					}
					for(let item in areasJson.xj){
						areaDataXJ.push(areasJson.xj[item].area);
						seriesDataXJ.push({value:areasJson.xj[item].value,name :areasJson.xj[item].area});
					}
					for(let item in areasJson.xyr){
						areaDataXYR.push(areasJson.xyr[item].area);
						seriesDataXYR.push({value:areasJson.xyr[item].value,name :areasJson.xyr[item].area});
					}
					this.DBseriesData =seriesDataDB;
					this.XJseriesData =seriesDataXJ;
					this.XYRseriesData =seriesDataXYR;
					this.DBareaData = areaDataDB;
					this.XJareaData = areaDataXJ;
					this.XYRareaData = areaDataXYR;
				}
			})
		},

		getWords(scopeTime='today',chooseDate=['2015-02-01','2016-01-12'],type=1){/*type=1是scropeTime*/
			apiCountWords(scopeTime,chooseDate,type).then((res)=>{
				if(res.status==200){
					this.wordData = JSON.parse(res.data.result);
				}
			})
		},
		getCountTypeRank5(scopeTime='today',chooseDate=['2015-02-01','2016-01-12'],type=1){/*type=1是scropeTime*/
			apiCountTypeRank5(scopeTime,chooseDate,type).then((res)=>{
					if(res.status==200){
						let TypeRank5Json = JSON.parse(res.data.result);
						let caseData =[];
						let seriesData = [];
						seriesData['db']=[];
						seriesData['xyr']=[];
						seriesData['xj'] =[];
						for(let item in TypeRank5Json.db){
							caseData.push({name:TypeRank5Json.db[item].case,max:100});
							seriesData['db'].push(TypeRank5Json.db[item].value);
						}
						for(let item in TypeRank5Json.xyr){
							seriesData['xyr'].push(TypeRank5Json.xyr[item].value);
						}
						for(let item in TypeRank5Json.xj){
							seriesData['xj'].push(TypeRank5Json.xj[item].value);
						}
						// 取最大值
						let newArr = [];
						for(let item in seriesData){
							newArr = newArr.concat(seriesData[item])
						}
						caseData.forEach((elem) => {
							elem.max = Math.max(...newArr);
						});
						this.Rank5seriesData = seriesData;
						this.Rank5caseData = caseData;
					}
			})
		},
		changeRanKingTime(data){
				this.getRanTime(data);
		},
		changeRanKingType(data){
				this.getRanType(data);
		},
		changeCaseBar(){/*时间区域选择,更新各类时间*/
		  let date = this.chartsDate;
  		this.getTimeBar(date,1,'',1);//时间图
      this.getTimeBar(date,1,'',2);//类型图
  		this.getAreas('',date,2);
			this.getWords('',date,2);
			this.getCountTypeRank5('',date,2);
  	},
  	caseBarClick(scopeTime){/*日，周，月选择,更新各类时间*/
  		this.getTimeBar('',2,scopeTime,1);//时间图
      this.getTimeBar('',2,scopeTime,2);//类型图
  		this.getAreas(scopeTime,'',1);
			this.getWords(scopeTime,'',1);
			this.getCountTypeRank5(scopeTime,'',1);
  		this.activeClass = scopeTime;
  	}
  },

}
</script>

<style lang="scss" scoped>
  .infocase {
    width: 80%;
    min-width: 1200px;
    margin: 0 auto;
    margin-top: 6px;
    .case_dataPicker {
      text-align: center;
      margin-bottom: 12px;
      ul {
        display: inline-block;
        margin-right: 40px;
        font-size: 12px;
        li {
          float: left;
          margin-right: 8px;
          cursor:pointer;
        }
        li.active {
          color : rgb(59, 152, 250)
        }
      }
    }
    .time_bar,.type_bar {
      width: 100%;
      height: 420px;
      margin-bottom: 20px;
      .chart_area {
        width: 66%;
        height: 100%;
        float: left;
      }
      .ranking {
        width: 32%;
        height: 100%;
        float: right;
      }
    }
    .pie_area {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 400px;
      margin-bottom: 20px;
      .pieItem {
        width: 32%;
      }
    }
    .wordCloud{
      display: inline-block;
      width: 66%;
      height: 500px;
      margin-bottom: 30px;
    }
    .radar {
      display: inline-block;
      width: 32%;
      height: 500px;
      margin-bottom: 30px;
      margin-left: 24px;
    }
  }
</style>
